<template>
    <div class="header">
        <van-nav-bar title="" left-text="返回" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="link-o" size="18" />
                <van-icon name="star-o" size="18" />
                <van-icon name="ellipsis" size="18" />
            </template>
        </van-nav-bar>
    </div>

    <van-tabs v-model:active="activeName" router sticky @click-tab="handler()">
        <van-tab replace title="1人独享套餐" name="1" to="/package/packageOne">

        </van-tab>
        <van-tab replace title="2人招牌套餐" name="2" to="/package/packageTwo">

        </van-tab>
        <van-tab replace title="4人特惠套餐" name="4" to="/package/packageFour">

        </van-tab>
    </van-tabs>
    <router-view></router-view>

</template>

<script setup>
import useZBStore from '@/pinia/index'
import { ref } from 'vue';
import { useRoute } from 'vue-router'
const useStore = useZBStore()

const route = useRoute()
let packageId = localStorage.getItem('packageId')
const activeName = ref(packageId);


const handler = () => {
    // localStorage.removeItem('packageId')
    localStorage.setItem('packageId', activeName.value)
}
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 100px;
    background-color: skyblue;
}

.van-icon {
    margin-left: 15px;
}
</style>